<template>
    <div class="chart">
        <Echart :config="config" width="400px" height="210px" refName="quanPing" ref="chart"></Echart>
        <div class="total">
            <div>
                <div class="vlaue">{{ value || "---" }}</div>
                <div class="title">总数</div>

            </div>
        </div>
    </div>
</template>
<script>
import Echart from "@/common/index.vue"
import { option } from "@/components/leftTop2/index"
export default {
    data() {
        return {
            config: null,
            instance: null,
            mTime: null,
            isPlay: false,
            index: -1,
            value: null
        }
    },
    components: {
        Echart
    },
    methods: {
        getEchartsInstance() {
            this.instance = this.$refs.chart.getData();
        },
        pieActive() {
            // this.index = 0 //高亮所在下标
            let dataLength = this.config.series[0].data.length   // 当前饼图有多少个扇形
            // 用定时器控制饼图高亮
            this.mTime = setInterval(() => {
                // 清除之前的高亮
                this.instance.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                })
                this.index = (this.index + 1) % dataLength
                // 当前下标高亮
                this.instance.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: this.index
                })
                // this.instance.dispatchAction({
                //     type: 'showTip',
                //     seriesIndex: 0,
                //     dataIndex: this.index
                // });
                if (this.index > dataLength) {
                    this.index = 0
                }
            }, 2000)
        },
        handlerEvent() {
            this.instance.on('mouseout', () => {
                this.instance.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                })
                this.isPlay = false
                this.pieActive()

            })
            // 鼠标划入
            this.instance.on('mouseover', (params) => {
                // 停止定时器，清除之前的高亮
                clearInterval(this.mTime)
                this.instance.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: this.index
                })
                // //高亮选中 一次
                if (!this.isPlay) {
                    this.instance.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: params.dataIndex
                    })
                    this.index = params.dataIndex
                    this.isPlay = true
                }
            })
        },
        handlerValue() {
            this.config.series[0].data.forEach((item) => {
                this.value += item.value
            })
        },
        immediate() {
            this.instance.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: 0
            })
            this.index++
        }

    },
    created() {
    },
    mounted() {
        this.config = option.call(this)
        this.handlerValue()
        this.getEchartsInstance()
        this.immediate()
        this.pieActive()
        this.handlerEvent()
    },
}
</script>
<style lang="less" scoped>
.chart {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.total {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    .title {
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vlaue {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 24px;
    }
}
</style>
